/* eslint-disable */
import React, { memo, useState } from "react";
import Taro from "@tarojs/taro";
import { Image, Text, View, } from '@tarojs/components';
import { Cell, CellGroup, Toast } from '@antmjs/vantui'
import MyIcon from "@/components/MyIcon";
import './index.scss'
import { findMapsByFieldNameAndDictItemValue } from "@/services/api/common";
import { stringifyUrl } from "query-string";
// import { ethers } from "ethers";
// import { ethers  } from "./ethers.js";



const MineCenter = (props) => {

  const { userInfo = [] } = props

  const icon = (name) => {
    return (
      <MyIcon iconName={`${name}`} size={18} />
    )
  }

  const icon_image = (name) => {
    return (
      <Image src={require(`@/assets/icons/mine/${name}.svg`)} style={{ width: 20, height: 24, marginRight: 12 }} />
    )
  }



  const themeVars = {
    rateIconFullColor: '#e19a9a',
    sliderBarHeight: '4px',
    sliderButtonWidth: '20px',
    sliderButtonHeight: '20px',
    sliderActiveBackgroundColor: '#e19a9a',
    buttonPrimaryBorderColor: '#e19a9a',
    buttonPrimaryBackgroundColor: '#e19a9a',
  }

  const [show, setShow] = useState(false)


  /**
   * 实名右侧区域绘制
   * @returns
   */
  const renderSMRightIcon = () => {
    return (
      <View className="right-icon">
        {
          userInfo.userRisk?.authCertiStatus === 5
            ? <Text className="text-g5">线下认证</Text>
            : <>
              {
                userInfo.userRisk?.authCertiStatus !== 3
                  ? <Text className="text-g5">未认证</Text>
                  :
                  <View className="sm-right">
                    <Image className="wallet" src={require(`@/assets/icons/mine/mine_list_wallet.svg`)} style={{ width: 16, height: 16, }} />
                    <Text className="text-sm">已认证</Text>
                    <Image src={require(`@/assets/icons/public/public_arrow_right.svg`)} style={{ width: 16, height: 16, }} />
                  </View>
              }
            </>
        }
      </View>

    )
  }

  /**
   * 合格投资者右侧区域绘制
   * @returns
   */
  const renderEligibleInverstorsRightIcon = () => {
    return (
      <View className="right-icon">
        {
          userInfo.userRisk?.investConfirmAuthStatus === 5
            ? <Text className="text-g5">线下认证</Text>
            : <>
              {
                userInfo.userRisk?.investConfirmAuthStatus !== 2
                  ?
                  <>
                    {
                      userInfo.userRisk?.investorClass !== -1 && userInfo.userRisk?.investConfirmAttachment.length > 0 && userInfo.userRisk?.riskAccept > 0
                        ?
                        <Text className="text-g5">已签署</Text>
                        :
                        <Text className="text-g5">未认证</Text>
                    }</>

                  :
                  <View className="sm-right">
                    <Image className="wallet" src={require(`@/assets/icons/mine/mine_list_wallet.svg`)} style={{ width: 16, height: 16, }} />
                    <Text className="text-sm">已认证</Text>
                    <Image src={require(`@/assets/icons/public/public_arrow_right.svg`)} style={{ width: 16, height: 16, }} />
                  </View>
              }
            </>
        }
      </View>

    )
  }

  /**
   * 合格投资者右侧区域绘制
   * @returns
   */
  const renderFexcpRightIcon = () => {
    const maps = findMapsByFieldNameAndDictItemValue('risk_accept', userInfo.userRisk?.riskAccept);
    const rightName = `${userInfo.userRisk?.quesInvestNum ?? 0}分 |  ${maps != null ? maps['dictItemName'] : ''}`;

    return (
      <View className="right-icon">
        {
          userInfo.userRisk?.investConfirmAuthStatus === 5
            ? <Text className="text-g5">{rightName}</Text>
            : <>
              {
                userInfo.userRisk?.riskAccept > 0
                  ?
                  <Text className="text-cp">{rightName}</Text>
                  :
                  <Text className="text-g5">未测评</Text>
              }
            </>
        }

      </View>
    )
  }

  const renderNormalRightIcon = () => {
    return (
      <View className="right-icon">
        <Image src={require(`@/assets/icons/public/public_arrow_right.svg`)} style={{ width: 16, height: 16, }} />
      </View>
    )
  }


  function gotoEligibleInverstors() {
    // 实名
    console.log(userInfo)
    if (userInfo.userRisk?.authCertiStatus !== 3) {
      Toast.show('请先完成线上实名认证')
      return
    }
    Taro.navigateTo({ url: '/pages/eligible_investors/index?isJG=1' })
  }

  /**
   * 实名
   */
  function gotoSm() {
    if (userInfo.userRisk?.authCertiStatus !== 3) {
      Taro.navigateTo({ url: '/realname/index' })
    } else {
      Taro.navigateTo({ url: '/mineDetail/alRealName/index' })
    }
  }



  /**
   * 风险测评
   */
  function gotoFxcp() {
    if (userInfo.userRisk?.authCertiStatus !== 3) {
      Toast.show('请先完成线上实名认证')
      return
    }
    if (userInfo.userRisk?.riskAccept > 0) {
      // 去详情
      let userRisk = { ...userInfo.userRisk, isOldRisk: true }
      const url = stringifyUrl({ url: `/eligible_investors/risk_assessment/detail/index`, query: userRisk }, { encode: false })
      Taro.navigateTo({ url: url })

    } else {
      const url = stringifyUrl({ url: `/eligible_investors/risk_assessment/index`, query: userInfo.userRisk }, { encode: false })

      Taro.navigateTo({ url: url })
    }

  }


  /**
   *
   */
  return (

    <View className='mine_center'>
      <CellGroup inset>
        <Cell renderIcon={icon_image('mine-realname')} title='实名认证' titleStyle={{ fontSize: '16px' }} border={false} renderRightIcon={renderSMRightIcon()} onClick={() => gotoSm()} clickable />
        <Cell renderIcon={icon_image('mine-eligible-invertors')} title='合格投资者承偌' titleStyle={{ fontSize: '16px' }} renderRightIcon={renderEligibleInverstorsRightIcon()} onClick={() => gotoEligibleInverstors()} clickable />
      </CellGroup>
      <CellGroup inset>
        <Cell renderIcon={icon_image('mine_list_fxcp')} title='风险测评' titleStyle={{ fontSize: '16px' }} renderRightIcon={renderFexcpRightIcon()} onClick={() => gotoFxcp()} clickable />
      </CellGroup>
      <CellGroup inset>
        <Cell renderIcon={icon('icon-invite-ic van-my-icon')} title='邀请好友' titleStyle={{ fontSize: '16px' }} border={false} renderRightIcon={renderNormalRightIcon()} linkType='navigateTo' url='/mineDetail/inviteFriends/index' clickable />
        <Cell renderIcon={icon('icon-setting-ic van-my-icon')} title='设置' titleStyle={{ fontSize: '16px' }} renderRightIcon={renderNormalRightIcon()} linkType='navigateTo' url='/mineDetail/detail/index' />
      </CellGroup>
      <Toast />


    </View>
  );
};

export default memo(MineCenter);
